<template>
  <div id="App">
    <myHead  :addItems="addItems" />
    <!-- content -->
    <div id="ff">
      <myList 
        :items="items" 
        :Check="Check" 
        :itemDelete="itemDelete"/>
      <myFooter 
        :items="items" 
        :checkAll="checkAll"/>
    </div>
  </div>
</template>

<script>
import myHead from "./components/myHead.vue"
import myList from "./components/myList.vue"
import myFooter from './components/myFooter.vue'

export default {
  name: 'App',
  components: {
    myHead, myList, myFooter
  },
  data() {
    return {
      // 可以使用axios 去请求数据过来  每次修改post回去
      items: [
        { id: '01', title: 'python', done: true },
        { id: '02', title: 'java', done: false },
        { id: '03', title: 'vue', done: false }
      ]
    };
  },
  methods: {
    addItems(itemOBJ){
      // console.log(itemOBJ);
      this.items.unshift(itemOBJ);
    },
    Check(id){
      // 遍历foreach
      this.items.forEach((item) => {
        if(id === item.id) item.done = !item.done;
      });
      
    },
    itemDelete(id){
      // filter 不改变原数组 
     this.items = this.items.filter( item=> item.id !== id)
    },
    checkAll(done){
      this.items.forEach((item)=>{
                item.done = done
            })
    }
  }
}
</script>

<style>
* {
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

body {
  background-color: #b8c9ff;
}

.del1 {
  background-color: #f40;
  border-radius: 25px;
  width: 50px;
  height: 30px;
  box-shadow: 5px 5px 10px #556677;
  outline: 0;
}

.edit {
  background-color: royalblue;
  border-radius: 25px;
  width: 50px;
  height: 30px;
  box-shadow: 5px 5px 10px #556677;
  outline: 0;
  color: #FFFFFF;
}

#ff{
  display: flex;
  flex-direction: row-reverse;
}
/* #donecount {
  width: 30px;
  height: 30px;
  background-color: #FFFFFF;
  display: inline-block;
  border-radius: 50%;
  float: right;
  font-size: 1em;
  margin-top: 10px;
  text-align: center;
  line-height: 30px;
} */
</style>
